<template>
  <TaskChatDialog :model-value="modelValue" title="查阅" width="71%" @close="close" append-to-body>
    <div class="content">
      <div class="content-report-info">
        <div>{{ reportInfo.userName }}</div>
        <div class="header-title">
          日报日期：
          <span>{{ reportInfo.selectDay }}</span>
        </div>
        <div class="header-title">
          提交时间：
          <span>{{ reportInfo.createdTime }}</span>
        </div>
        <div class="header-title" :style="{ color: formatReportStatus(reportInfo.wrStatus)['color'] }">
          {{ formatReportStatus(reportInfo.wrStatus)['label'] }}
        </div>
      </div>
      <div class="content-nums">
        <div class="header-title">
          选中任务数：
          <span>{{ (Array.isArray(tcTaskInfos) && tcTaskInfos.length) || 0 }}</span>
        </div>
        <div class="header-title">
          已登记工时：
          <span>{{ taskCount }}</span>
          h
        </div>
      </div>
      <el-divider />
      <div>
        <el-card class="task-card" v-for="(task, index) in tcTaskInfos" :key="index">
          <template #header>
            <div @click="viewDetail(task.taskId)">
              <span class="task-title code-style">#{{ task.taskCode }}</span>
              <span class="task-title">{{ task.taskTitle }}</span>
              <span>{{ task.planBegintime }}</span>
              至
              <span>{{ task.planEndtime }}</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-content-info">
              <div class="card-content-title">
                登记工时：
                <span class="text-blue">{{ task.wrHours }}h</span>
              </div>
              <div class="card-content-title">
                任务类型：
                <span :style="{ color: formatWorkType(task.workType)['color'] }">
                  {{ formatWorkType(task.workType)['label'] }}
                </span>
              </div>
              <div class="card-content-title">
                时间：
                <span>{{ task.createdTime }}</span>
              </div>
            </div>
            <div class="card-content-schedule">
              <div class="card-content-title">任务完成度：</div>
              <div class="card-content-schedule-info">
                <div class="card-content-schedule-progress">
                  <el-progress :text-inside="true" :stroke-width="16" :percentage="task.completePercent" />
                </div>
                <div class="card-content-schedule-text">
                  <span>已耗时：{{ task.currentCostDays }}天</span>
                  <span>已登记工时：{{ task.currentCostHour }}</span>
                  <span>预计剩余时间：{{ task.expHours }}h</span>
                </div>
              </div>
            </div>
            <div>
              <div class="card-content-title">
                工作说明：
                <RichTextViewer :view-html="task.WorkingRecordRemark"></RichTextViewer>
                <!-- <span>{{ task.taskDetail }}</span> -->
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <el-divider />
      <div>
        <el-card>
          <template #header>
            <div>
              <span>其他说明</span>
            </div>
          </template>
          <div class="card-content">
            {{ tcDailyReport.dailyContent }}
          </div>
        </el-card>
      </div>
      <el-divider />
      <div>
        <el-card>
          <template #header>
            <div>
              <span>明日计划</span>
            </div>
          </template>
          <div class="card-content">
            {{ tcDailyReport.dailyTomorrowContent }}
          </div>
        </el-card>
      </div>
      <el-divider />
      <div v-if="!isView">
        <el-card>
          <template #header>
            <div>
              <span>查阅意见</span>
            </div>
          </template>
          <div class="card-content">
            <el-input
              v-model="replyRemark"
              maxlength="60"
              :rows="2"
              type="textarea"
              placeholder="请输入"
              show-word-limit />
          </div>
        </el-card>
      </div>
      <div v-else>
        <div class="reply" v-for="item in tcDailyReplyList" :key="item.replyId">
          <div class="reply-user">
            {{ item.replyUserName }}
          </div>
          <div class="reply-remark" v-show="item.replyRemark">{{ item.replyRemark }}</div>
        </div>
      </div>
      <div class="content-button">
        <el-button @click="close">关闭</el-button>
        <el-button v-if="!isView" type="primary" @click="submit" :loading="isLoading">提交</el-button>
      </div>
    </div>
  </TaskChatDialog>
  <TaskChatDialog
    v-model="taskInfoVisible"
    :title="taskDialogTitle"
    width="80%"
    class="task-dialog"
    destroy-on-close
    @close="handleDetailClose"
    :close-on-click-modal="false"
    body-class-name="dialog-custom"
    append-to-body>
    <TaskDetail
      :task="taskInfo"
      :show-message="showMessage"
      hoursCheck
      allowOperations
      @refresh="viewDetail"
      @dialogClick="handleDialog"></TaskDetail>
  </TaskChatDialog>
</template>

<script setup>
import { formatReportStatus, formatWorkType } from '@/utils/task-utils'
import { getTcDailyReport, addTcDailyReply } from '@/assets/api/report'
import { getTaskDetail } from '@/assets/api/task'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: Boolean,
})

const emit = defineEmits(['update:modelValue', 'refresh'])

defineExpose({
  open,
})

const isLoading = ref(false)

const taskDialogTitle = computed(() => {
  if (taskInfo.value.taskTitle) {
    const { projectName, itemName, taskTitle, taskCode } = taskInfo.value
    return `${projectName}/${itemName}/${taskTitle}-#${taskCode}`
  }
  return ''
})
const dailyReportId = ref('')
const showMessage = ref(false)
const reportInfo = ref([])

const isView = ref(false)
function open(row, type) {
  reportInfo.value = row
  dailyReportId.value = row.dailyReportId + ''
  if (type === 'view') isView.value = true
  getInfo(dailyReportId.value)
}

const replyRemark = ref('')
async function submit() {
  let form = {
    replyRemark: replyRemark.value,
    dailyId: dailyReportId.value,
  }
  isLoading.value = true
  const res = await addTcDailyReply(form)
  if (res.code === 200) {
    ElMessage.success('提交成功')
    emit('refresh')
    close()
  } else {
    ElMessage.error(res.msg)
  }
  isLoading.value = false
}

const taskCount = ref(0)
const tcDailyReport = ref({})
const tcTaskInfos = ref([])
const tcDailyReplyList = ref([])
async function getInfo(id) {
  const { data } = await getTcDailyReport(id)
  if (data) {
    tcDailyReport.value = data.tcDailyReport || {}
    tcDailyReplyList.value = data.tcDailyReplyList || []
    tcTaskInfos.value = formatData(data.tcTaskInfos, data.tcWorkingRecordList)
    taskCount.value = tcTaskInfos.value.reduce((prev, cur) => {
      return prev + parseInt(cur.wrHours)
    }, 0)
  }
}
function formatData(data1, data2) {
  if (Array.isArray(data1) && Array.isArray(data2)) {
    let result = data1.map((item) => {
      item.taskId += ''
      data2.forEach((item2) => {
        item2.taskId += ''
        if (item.taskId === item2.taskId) {
          item = {
            ...item,
            WorkingRecordRemark: item2.remark,
            wrHours: item2.wrHours,
            workType: item2.workType,
            createdTime: item2.createdTime,
          }
        }
      })
      return item
    })
    return result
  } else {
    return []
  }
}

const taskInfoVisible = ref(false)
const taskInfo = ref({})
async function viewDetail(id) {
  const { data } = await getTaskDetail(id)
  taskInfo.value = data
  taskInfoVisible.value = true
}
function handleDetailClose() {
  showMessage.value = false
  taskInfo.value = {}
}
function handleDialog(task) {
  showMessage.value = true
  handleOpen(task)
}
// 打开详情弹窗
function handleOpen(task) {
  viewDetail(task?.taskId)
}
function close() {
  replyRemark.value = ''
  tcDailyReplyList.value = []
  taskCount.value = 0
  isView.value = false
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.content {
  height: 70vh;
  overflow-y: auto;
  &-report-info {
    @include use-flex(normal, flex-start, row);
    div {
      margin-right: 40px;
      color: #282828;
      font-weight: 700;
    }
  }
  &-nums {
    margin-top: 20px;
    @include use-flex(normal, flex-start, row);
    div {
      margin-right: 30px;
    }
  }
  &-button {
    margin: 20px;
    @include use-flex(normal, flex-end, row);
  }
}

.card-content {
  padding: 0 20px;
  box-sizing: border-box;
  &-title {
    color: #606060;
  }
  &-info {
    margin-bottom: 10px;
    @include use-flex(normal, flex-start, row);
    div {
      margin-right: 15%;
    }
  }
  &-schedule {
    margin-bottom: 10px;
    @include use-flex(normal, flex-start, row);
    &-info {
      width: 50%;
    }
    &-progress {
      margin-bottom: 5px;
    }
    &-text {
      width: 100%;
      span {
        display: inline-block;
        margin-right: 10%;
      }
    }
    div {
      margin-right: 5%;
    }
  }
}

.reply {
  @include use-flex(center, flex-start, row);
  margin: 10px 0;
  &-user {
    width: 10%;
    text-align: center;
    margin-right: 10px;
    height: 45px;
    border-radius: 25px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #79bbff;
    color: #fff;
  }
  &-remark {
    width: 90%;
    height: 45px;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #b1b3b8;
  }
}

.task-card {
  margin: 10px 0;
}

.code-style {
  color: #00a4f1;
  font-weight: 700;
  cursor: pointer;
}
.text-blue {
  color: #00a4f1;
}
.task-title {
  display: inline-block;
  // margin: 0 10px;
  margin-right: 15px;
}

:deep(.elp-progress) {
  width: 100%;
}

:deep(.elp-divider) {
  margin: 15px 0 !important;
}

:deep(.elp-card__header) {
  padding: 10px 20px;
}
</style>
